<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客服工作台 - 柠吉在线客服</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/staff_chat.css">
    <link rel="stylesheet" href="/static/css/message.css">
    <script src="/static/js/vue.js"></script>
</head>
<body>

<div class="container">
    <div class="left-panel">
        <div class="tab">
            <div class="item-1 active">当前对话
                <span class="layui-badge" id="unread-all" style="display: none;"></span>
            </div>
            <div class="item-2">黑名单</div>
        </div>
        <div id="now-chat-list" class="menu" style="display: none;">
            <div v-for="item in list" :id="'id_' + item.id" class="item">
                <span class="name">{{item.name}}</span>
                <span class="date">{{item.date}}</span>
                <span class="msg" v-html="item.lastMsg"></span>
                <span v-show="item.newMsgNum != 0" class="new-num">{{item.newMsgNum}}</span>
                <div class="open-chat" @click="open(item)"></div>
            </div>
        </div>
        <div class="menu" style="display: none;"></div>
    </div>

    <div id="main-chat" class="center-panel">
        <ul id="show-message" class="show-message">
            <template v-for="item in messages">

                <!-- 时间 -->
                <template v-if="display_time()">
                    <li class="system"><span class="bubble" v-html="item.sendDate"></span></li>
                </template>

                <!-- 客户消息 -->
                <template v-if="item.sendType==0">
                    <li class="left" :data-id="item.id">
                        <div class="arrow"></div>
                        <div class="bubble" v-html="item.content"></div>
                        <div class="clear"></div>
                    </li>
                </template>

                <!-- 客服消息 -->
                <template v-else-if="item.sendType==1">
                    <li class="right" :data-id="item.id">
                        <div class="arrow"></div>
                        <div class="bubble" v-html="item.content"></div>
                        <div class="clear"></div>
                    </li>
                </template>

                <!-- 系统消息 -->
                <template v-else-if="item.sendType==2">
                    <li class="system" :data-id="item.id"><span class="bubble" v-html="item.content"></span></li>
                </template>

            </template>
        </ul>

        <div class="input-message">

            <div class="tool-bar">

                <!-- 表情 -->
                <i id="open-emo-panel" title="表情"></i>

                <!-- 图片 -->
                <i id="open-pic-icon" style="display: none;" title="发送图片"></i>

                <!-- 备注 -->
                <i id="open-remarks" title="备注"></i>

                <!-- 结束对话 -->

                <!-- 拉黑 -->

            </div>

            <div class="input">

                <textarea id="edit" class="edit" placeholder="Ctrl+Enter发送"></textarea>

            </div>

            <div class="bottom">

                <button id="send" class="send">发送</button>

            </div>

        </div>

        <div id="emo-panel" class="emo-panel">

            <div class="title">
                选择表情

                <div id="close-emo-panel" class="close-icon"></div>
            </div>

            <div id="emo-box" class="emo-box">


                <img title="[微笑]" src="/static/images/emo/emo_13.gif"/> <img
                    title="[可怜]" src="/static/images/emo/emo_17.gif"/> <img
                    title="[大笑]" src="/static/images/emo/emo_15.gif"/> <img
                    title="[调皮]" src="/static/images/emo/emo_21.gif"/> <img
                    title="[饥饿]" src="/static/images/emo/emo_41.gif"/> <img
                    title="[再见]" src="/static/images/emo/emo_42.gif"/> <img
                    title="[互粉]" src="/static/images/emo/emo_11.gif"/> <img
                    title="[鼓掌]" src="/static/images/emo/emo_52.gif"/> <img
                    title="[呲牙]" src="/static/images/emo/emo_14.gif"/> <img
                    title="[可爱]" src="/static/images/emo/emo_16.gif"/> <img
                    title="[害羞]" src="/static/images/emo/emo_20.gif"/> <img
                    title="[闭嘴]" src="/static/images/emo/emo_22.gif"/> <img
                    title="[鄙视]" src="/static/images/emo/emo_23.gif"/> <img
                    title="[示爱]" src="/static/images/emo/emo_24.gif"/> <img
                    title="[大哭]" src="/static/images/emo/emo_25.gif"/> <img
                    title="[偷笑]" src="/static/images/emo/emo_26.gif"/> <img
                    title="[亲亲]" src="/static/images/emo/emo_27.gif"/> <img
                    title="[冷]" src="/static/images/emo/emo_28.gif"/> <img
                    title="[敲打]" src="/static/images/emo/emo_29.gif"/> <img
                    title="[惊讶]" src="/static/images/emo/emo_30.gif"/> <img
                    title="[左哼哼]" src="/static/images/emo/emo_32.gif"/> <img
                    title="[右哼哼]" src="/static/images/emo/emo_31.gif"/> <img
                    title="[嘘]" src="/static/images/emo/emo_33.gif"/> <img
                    title="[衰]" src="/static/images/emo/emo_34.gif"/> <img
                    title="[委屈]" src="/static/images/emo/emo_35.gif"/> <img
                    title="[吐]" src="/static/images/emo/emo_36.gif"/> <img
                    title="[困]" src="/static/images/emo/emo_37.gif"/> <img
                    title="[快乐]" src="/static/images/emo/emo_38.gif"/> <img
                    title="[怒]" src="/static/images/emo/emo_39.gif"/> <img
                    title="[疑问]" src="/static/images/emo/emo_40.gif"/> <img
                    title="[爆筋]" src="/static/images/emo/emo_51.gif"/> <img
                    title="[晕]" src="/static/images/emo/emo_53.gif"/> <img
                    title="[快哭了]" src="/static/images/emo/emo_54.gif"/> <img
                    title="[抓狂]" src="/static/images/emo/emo_55.gif"/> <img
                    title="[尴尬]" src="/static/images/emo/emo_56.gif"/> <img
                    title="[阴险]" src="/static/images/emo/emo_57.gif"/> <img
                    title="[骂]" src="/static/images/emo/emo_58.gif"/> <img
                    title="[爱心]" src="/static/images/emo/emo_59.gif"/> <img
                    title="[心碎]" src="/static/images/emo/emo_60.gif"/> <img
                    title="[抠鼻]" src="/static/images/emo/emo_18.gif"/> <img
                    title="[惊]" src="/static/images/emo/emo_19.gif"/> <img
                    title="[考虑]" src="/static/images/emo/emo_43.gif"/> <img
                    title="[流汗]" src="/static/images/emo/emo_44.gif"/> <img
                    title="[哈欠]" src="/static/images/emo/emo_45.gif"/> <img
                    title="[睡觉]" src="/static/images/emo/emo_46.gif"/> <img
                    title="[贪财]" src="/static/images/emo/emo_47.gif"/> <img
                    title="[无奈]" src="/static/images/emo/emo_48.gif"/> <img
                    title="[得意]" src="/static/images/emo/emo_49.gif"/> <img
                    title="[色]" src="/static/images/emo/emo_50.gif"/> <img
                    title="[礼物]" src="/static/images/emo/emo_12.gif"/> <img
                    title="[狗]" src="/static/images/emo/emo_01.gif"/> <img
                    title="[神马]" src="/static/images/emo/emo_02.gif"/> <img
                    title="[云]" src="/static/images/emo/emo_03.gif"/> <img
                    title="[给力]" src="/static/images/emo/emo_04.gif"/> <img
                    title="[团结]" src="/static/images/emo/emo_05.gif"/> <img
                    title="[大V]" src="/static/images/emo/emo_06.gif"/> <img
                    title="[熊猫]" src="/static/images/emo/emo_07.gif"/> <img
                    title="[兔]" src="/static/images/emo/emo_08.gif"/> <img
                    title="[奥特曼]" src="/static/images/emo/emo_09.gif"/> <img
                    title="[囧]" src="/static/images/emo/emo_10.gif"/>


            </div>


        </div>

    </div>

    <div class="right-panel"></div>

    <!-- 遮罩层 -->
    <div id="mask-layer">
        <h1>当前没有和访客建立对话</h1>
    </div>

</div>


<div id="data" staff_id="{$staff.user_name}" style="display: none;"></div>

<script src="/static/layui/layui.js"></script>
<script src="/static/js/staff_chat.js"></script>
</body>
</html>